<template>
  <div class="app-container">
    <div class="header">
      <h2>南京新闻奖申报</h2>
      <h4>{{ $store.state.user.name }} 请填写件<span class="news-num">{{ max_counts }}</span>件作品！</h4>
    </div>

    <el-row v-loading="loading" :gutter="20" class="content">
      <el-col v-for="(item,index) in list" :key="index" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card class="box-card institution-item">
          <div slot="header" class="clearfix">
            <span style="display: inline-block; width: 85%; font-weight: 900;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.news_title }} </span>
            <el-button v-if="item.is_declare == 1" style="float: right; padding: 3px 0" type="text">已申报</el-button>
            <el-button v-else style="color:#F56C6C;float: right; padding: 3px 0" type="text">未申报</el-button>
          </div>
          <div class="text item">
            <div>体裁：{{ item.genre }}</div>
            <div>填写人：{{ item.reporter }}</div>
            <div>手机号：{{ item.reporter_phone }}</div>
          </div>
          <div class="card-bottom" style="margin-top:20px;display: flex;justify-content: space-evenly;">
            <i class="el-icon el-icon-view" @click="handleView(item)" />
            <i v-if="item.is_declare == 0" class="el-icon el-icon-edit-outline" @click="handleEdit(item)" />
            <i v-if="item.is_declare == 0" style="color: red" class="el-icon el-icon-delete" @click="handleDel(item.id)" />
          </div>
        </el-card>
      </el-col>

      <el-col v-if="list.length < max_counts" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card class="box-card institution-item institution-add">
          <i class="el-icon el-icon-plus" @click="add" />
        </el-card>
      </el-col>

    </el-row>

    <pagination v-show="total>0 " small :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />

    <InstitutionAddEdit :open.sync="dialogOpen" :form="form" :title="dialogTitle" :btn-label="btnLabel" @update-form="updateForm" @update-btn-label="updateBtnLabel" />

    <el-dialog width="1000px" :visible.sync="printOpen">
      <InstitutionPrint :print-open="printOpen" :form="printForm" />
    </el-dialog>

  </div>
</template>

<script>
import InstitutionAddEdit from './AddEdit'
import InstitutionPrint from './Print'
import { getList, delNewsDeclare, getReviewCounts, getPostCounts } from '@/api/newsDeclare'
export default {
  name: 'Index',
  components: {
    InstitutionAddEdit,
    InstitutionPrint
  },
  data() {
    return {
      dialogOpen: false,
      printOpen: false,
      printForm: { },
      form: {},
      dialogTitle: '南京新闻奖申报',
      list: [],
      total: 0,
      btnLabel: '新增',
      queryParams: {
        page: 1,
        limit: 10
      },
      loading: false,
      max_counts: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    updateForm(form, label = '编辑') {
      this.dialogTitle = form.news_title
      this.form = form
      this.btnLabel = label
    },
    handleView(row) {
      this.printOpen = true
      this.printForm = row
    },
    handleEdit(row) {
      this.dialogTitle = row.news_title
      this.form = row
      this.dialogOpen = true
      this.btnLabel = '修改'
    },
    handleDel(id) {
      console.log('id', id)
      const that = this
      that.$confirm('是否删除该数据？？？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.loading = true
        delNewsDeclare(id.toString()).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$notify.success(response.message)
            that.getList()
          } else {
            that.$notify.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    add() {
      this.dialogOpen = true
      this.btnLabel = '新增'
      this.form = {}
    },
    getList() {
      const that = this
      this.loading = true
      getList(this.queryParams).then(response => {
        if (response.code === 10000) {
          that.list = response.data
          that.total = response.count
        }
        this.loading = false
      })

      getPostCounts().then(response => {
        if (response.code === 10000) {
          this.max_counts = response.data.max_counts
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
  .header{
    //padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .news-num{
      font-weight: 800;
      color: red;
    }
  }
  .content{
    padding: 20px 20px;
    .institution-item{
      height: 200px;
      margin-bottom: 20px;
    }
    .institution-add{
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-icon-plus{
        color: #409eff;
        font-size: 35px;
      }
    }
  }
</style>
